<template>
  <div class="userInfo">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      title="用户信息"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field name="mytouxiang" label="我的头像">
        <template #input>
          <van-uploader
            v-model="userInfoObj.mytouxiang"
            :max-count="1"
            :after-read="afterRead"
          />
        </template>
      </van-field>

      <van-field
        v-model="userInfoObj.xingming"
        name="xingming"
        label="我的姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field name="xingbie" label="我的性别">
        <template #input>
          <van-radio-group v-model="userInfoObj.xingbie" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="userInfoObj.qq"
        name="qq"
        label="我的QQ"
        placeholder="请输入QQ"
        :rules="[{ required: true, message: '请输入QQ' }]"
      />
      <van-field
        v-model="userInfoObj.email"
        name="email"
        label="我的邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请输入邮箱' }]"
      />
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :loading="loading"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "userInfo",
  data() {
    return {
      userInfoObj: {
        mytouxiang: [{ url: "" }],
        xingming: "",
        xingbie: "1",
        qq: "",
        email: "",
      },
      loading: false,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      SERVE.getUserInfo({
        params: {
          uid: window.localStorage.u_id,
        },
      })
        .then((res) => {
          let tempObj = res.data;
          tempObj.mytouxiang = [{ url: tempObj.mytouxiang }];
          this.userInfoObj = tempObj;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onClickLeft() {
      this.$router.push("/vip");
    },
    onSubmit(values) {
      this.loading = true;
      values.uid = window.localStorage.u_id;
      values.mytouxiang = values.mytouxiang[0].url;
      SERVE.uploadUserInfo({ params: values }).then((res) => {
        this.loading = false;
        this.$notify({
          type: res.data.zt === "yes" ? "success" : "warning",
          message: res.data.xinxi,
          duration: 1000,
        });
        let that = this;
        if (res.data.zt === "yes") {
          setTimeout(() => {
            that.$router.push("/vip");
          }, 1000);
        }
      })
      .catch((err) => {
        this.loading = false;
        console.log("err", err);
      });
    },
    // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let param = new FormData();
      param.append("imgFile", file.file);
      SERVE.imgUpload(param)
        .then((res) => {
          file.status = "done";
          if (res.data) {
            this.userInfoObj.mytouxiang[0].url = `http://vue.yaoyiwangluo.com/up/${res.data}`;
          } else {
            file.status = "failed";
            file.message = "上传失败";
          }
        })
        .catch((err) => {
          file.status = "failed";
          file.message = "上传失败";
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.userInfo {
  background-color: #f2f2f2;
}
</style>
